<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台登录</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css">
    <style>
        iframe{
            width: 100%;
            height: 600px;
        }
        .frame{
            width: auto;
            height: auto;
            position: absolute;
            left: 12.5vw;
            right: 0vw;
            top: 90px;
            bottom: 0vh;
        }
        .topBar{
            background: white;
            position: absolute;
            top: 0;
            left: 12.5vw;
            height: 80px;
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row class="tac">
        <el-col :span="3">
            <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo">
                <el-menu-item
                        v-for="item in menu"
                        :index="item.index" @click="menuClick(item.url)">
                    <span slot="title">{{item.title}}</span>
                </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
    <div class="topBar">
        <div style="position: absolute;left: 50px;top: 10px;font-size: 2em">Hi,{{currentUser}}</div>
        <el-button type="warning" style="position: absolute;right: 250px;top: 10px" @click="logout">退出登录</el-button>
    </div>
    <div class="frame">
        <iframe :src="iframeUrl"></iframe>
    </div>
</div>
</body>
<script src="/js/vue.js"></script>
<script src="/js/axios-0.18.0.js"></script>
<script src="/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el : "#app",
        mounted(){
            this.currentUser = localStorage.getItem("administrator");
        },
        methods : {
            menuClick(url){
                //根据url跳转到指定页面
                console.log(url);
                this.iframeUrl = url;
            },
            logout() {
               localStorage.removeItem("administrator");
               top.location.href = '/background';
            },
        },
        data(){
            return {
                iframeUrl : "/backgroundPage/user",
                menu: [
                    {
                        index : '1',
                        title : '用户管理',
                        url : '/backgroundPage/user'
                    },
                    {
                        index : '2',
                        title : '数据集管理',
                        url : '/backgroundPage/data'
                    },
                    {
                        index : '3',
                        title : '文章管理',
                        url : '/backgroundPage/article'
                    },
                ],
                currentUser : '',
            }
        }
    })
</script>
</html>